<template>
  <div id="my">
    <div class="my-div">
      <img src="@/assets/email/user_bg.png" />
    </div>
    <div class="my-div1">
      <div class="divS">
        <div class="dive">
          <img :src="imguser.avatar" @click="$router.push('/info')" />
        </div>
        <span v-if="usera == false" @click="$router.push('/Signin')"
          >请登录</span
        >
        <p v-else>昵称:{{ imguser.nickname }}</p>
      </div>
      <div>
        <span @click="$router.push('/infoof')">设置密码</span>
      </div>
      <div class="guan" @click="$router.push('/guanzhu')">
        <img src="@/assets/email/haoyou.png" alt="" />
        <p>关注老师</p>
      </div>
    </div>
  </div>
</template>
<script>
import { getuserInfo } from "./yibu/my";
export default {
  data() {
    return {
      imguser: {
        avatar: require("@/assets/email/avatar.png"),
      },
      usera: false,
    };
  },
  mounted() {
    this.getuser();
  },
  methods: {
    async getuser() {
      let res = await getuserInfo();
      console.log(res);
      if (res.data.code == 200) {
        this.imguser = res.data.data;
        this.usera = true;
      } else {
        this.usera = false;
      }
    },
    tui() {
      localStorage.removeItem("Token");
      this.getuser();
    },
  },
};
</script>
<style lang="scss" scoped>
#my {
  width: 100%;
  height: 100vh;
  position: relative;
  .my-div {
    width: 100%;
    height: 110px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .my-div1 {
    width: 80%;
    height: 100%;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: 40px;
    transform: translate(-50%, -50%);
    .guan{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: aquamarine;
        width: 50px;
        img{
            width: 25px;
            height: 25px;
        }
    }
    .divS {
      display: flex;
      align-items: center;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid black;
      }
    }
  }
}
</style>